<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>首页 - 后台管理系统模板</title>
  <link rel="icon" href="favicon.ico" type="image/ico">
  <meta name="keywords" content="Sql-Web,Sql-Web,后台模板,后台管理系统,Sql-WebHTML模板">
  <meta name="description" content="Sql-Web是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
  <meta name="author" content="yinqi">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/materialdesignicons.min.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
</head>

<body>
  <div class="container-fluid p-t-15">

    <div class="row">
      <div class="col-sm-6 col-md-3">
        <div class="card bg-yellow">
          <div class="card-body clearfix">
            <div class="pull-right">
              <p class="h6 text-white m-t-0">最大链接数</p>
              <p class="h3 text-white m-b-0 fa-1-5x" id="maxConnections"></p>
            </div>
            <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
                  class="mdi mdi-currency-cny fa-1-5x"></i></span></div>
          </div>
        </div>
      </div>

      <div class="col-sm-6 col-md-3">
        <div class="card bg-primary">
          <div class="card-body clearfix">
            <div class="pull-right">
              <p class="h6 text-white m-t-0">当前连接数</p>
              <p class="h3 text-white m-b-0 fa-1-5x" id="currentConnections"></p>
            </div>
            <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
                  class="mdi mdi-account fa-1-5x"></i></span></div>
          </div>
        </div>
      </div>

      <div class="col-sm-6 col-md-3">
        <div class="card bg-success">
          <div class="card-body clearfix">
            <div class="pull-right">
              <p class="h6 text-white m-t-0">数据总量</p>
              <p class="h3 text-white m-b-0 fa-1-5x" id="totalData"></p>
            </div>
            <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
                  class="mdi mdi-arrow-down-bold fa-1-5x"></i></span></div>
          </div>
        </div>
      </div>

      <div class="col-sm-6 col-md-3">
        <div class="card bg-purple">
          <div class="card-body clearfix">
            <div class="pull-right">
              <p class="h6 text-white m-t-0">数据表个数</p>
              <p class="h3 text-white m-b-0 fa-1-5x" id="tableCount"></p>
            </div>
            <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
                  class="mdi mdi-comment-outline fa-1-5x"></i></span></div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">

      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <h4>表数据分布</h4>
          </div>
          <div class="card-body">
            <canvas class="js-chartjs-bars"></canvas>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <h4>SQL记录</h4>
          </div>
          <div class="card-body">
            <canvas class="js-chartjs-lines"></canvas>
          </div>
        </div>
      </div>

    </div>
  </div>

  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/main.min.js"></script>

  <!--图表插件-->
  <script type="text/javascript" src="js/Chart.js"></script>
  <script type="text/javascript">
    $(document).ready(function (e) {
      // 获取监控数据，并更新页面
      getMonitoringData();

      // 获取监控数据的函数
      function getMonitoringData() {
        $.ajax({
          url: "datasource/monitoring",
          type: "GET",
          success: function (response) {
            // 假设响应的格式是JSON，包含了所有需要的监控数据
            $('#maxConnections').text(response.maxConnections);
            $('#currentConnections').text(response.currentConnections);
            $('#totalData').text(response.totalData);
            $('#tableCount').text(response.tableCount + " 条");

            // 更新表数据分布图表
            // updateBarChart(response.tableDataDistribution);
          },
          error: function (xhr, status, error) {
            console.error("Failed to load monitoring data:", status, error);
          }
        });
      }

      // 更新表数据分布图表的函数
      function updateBarChart(data) {
        var $dashChartBarsCnt = jQuery('.js-chartjs-bars')[0].getContext('2d');
        var $dashChartBarsData = {
          labels: data.labels, // 表名
          datasets: [
            {
              label: '表数据行数',
              borderWidth: 1,
              borderColor: 'rgba(0,0,0,0)',
              backgroundColor: 'rgba(51,202,185,0.5)',
              hoverBackgroundColor: "rgba(51,202,185,0.7)",
              hoverBorderColor: "rgba(0,0,0,0)",
              data: data.rowsCount // 对应的行数
            }
          ]
        };

        new Chart($dashChartBarsCnt, {
          type: 'bar',
          data: $dashChartBarsData
        });
      }
    });


  </script>
</body>

</html>